import styled from 'styled-components';
import React, { CSSProperties, useState, useEffect, useRef } from 'react';
import { Button, Card, Modal, Result } from 'antd';
import { TableOutlined, PlusOutlined, MinusOutlined, EditOutlined, MoreOutlined } from '@ant-design/icons';

import { MetaDataDomain, metaDataGetMetaDomain } from '../../../../services';
import { DomainEditor } from '../domain-editor';

export interface MetaDataDomainInforPanelProps {
    style?: CSSProperties;
    domainIdentifier: string;
    onDomainChange?: (domainIdentifier: string) => Promise<void>;
}

export const MetaDataDomainInforPanel: React.FC<MetaDataDomainInforPanelProps> = (props) => {

    const [domain, setDomain] = useState<MetaDataDomain | null>(null);

    useEffect(() => {
        metaDataGetMetaDomain(props.domainIdentifier).then((item) => {
            console.log(item);
            setDomain(item);
        });
    }, [props.domainIdentifier]);

    if (!domain || domain == null) {
        return (
            <Content style={props.style}>

                <StyledCard
                    style={{
                    }}
                    title={'域编辑' + props.domainIdentifier}
                    styles={{
                        body: {
                            padding: '0px 2px'
                        }
                    }}
                >
                </StyledCard>
            </Content>
        );
    }
    return (
        <Content style={props.style}>

            <StyledCard
                style={{
                }}
                title={'域编辑' + props.domainIdentifier}
                styles={{
                    body: {
                        padding: '0px 2px'
                    }
                }}
            >
                <DomainEditor item={domain} onFinish={async () => {

                }}></DomainEditor>
            </StyledCard>
        </Content>
    );
}

const Content = styled.div`
    flex:  1;
    width: 100%;
    padding: 6px 6px;
    display: flex;
    gap: 6px;
`;

const StyledCard = styled(Card)`
    width: 100%;
`

const EmptyContainer = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
`;
